<!--
 * @Author: your name
 * @Date: 2020-12-25 09:25:30
 * @LastEditTime: 2020-12-25 17:08:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\alarm\alarmShowView.vue
-->
<template>
    <div class="alarmShowView-main-box">
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe @selection-change="handleSelectionChange($event)"  :column='column'>
            <template #option="{data}">
                <div class="option-box">
                    <el-button icon="el-icon-success" :title="$t('test.errorHistory.js_errorHistory_treated')" @click='loginDelMsg(data)'></el-button>
                </div>
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
    </div>
</template>

<script>
import baseTable from '../../components/common/baseTable'
export default {
    components: {
        baseTable
    },
    props: {

    },
    data() {
        return {
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('user.loginName'),
                value: 'loginName',
                slot:'loginName'
            },{
                title: this.$t('battery.batterySN'),
                value: 'inverterSn',
                slot:'inverterSn'
            },{
                title: this.$t('devWifi.wifiSN'),
                value: 'wsn',
            },{
                title: this.$t('alarmShowView.thName'),
                value: 'errorMessage',
                slot: 'errorMessage'
            },{
                title: this.$t('alarm.date'),
                value: 'timeStringVal',
                slot: 'timeStringVal'
            },{
                title: this.$t('control'),
                slot: 'option'
            }],
            selectDatalist:[],
            size:10,
            current:1,
            total:1,
        };
    },
    computed: {

    },
    watch: {
        total(){
            if(this.total==(this.current-1)*this.size&& this.total!=0){
                this.current-=1;
                if(this.current < 1){
                    this.current = 1
                }
                this.loginShowAllMsgList();
            }
        }
    },
    created() {

    },
    mounted() {
        this.loginShowAllMsgList()
    },
    methods: {
        async loginDelMsg(data){
            let res = await this.API.loginDelMsg({
                index:this.total-data.index-1,
                inverterSn:data.inverterSn,
                errorCode:data.errorCode,
            })
            if(this.comm.showMsg(res)){
                this.loginShowAllMsgList()
            }
        },
        async loginShowAllMsgList(){
            this.loading = true
            let res = await this.API.loginShowAllMsgList({
                size:this.size,
                current:this.current
            })
            this.dataRows = res.rows
            this.total = res.total
            this.loading = false
            if(this.dataRows.length > 0){
                for(let i = 0;i<this.dataRows.length;i++){
                    this.dataRows[i]['index'] = i
                }
            }
        },
        handleSelectionChange(val){
            this.selectDatalist = val
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.loginShowAllMsgList()
        },
        handleCurrentChange(val) {
          this.current = val
          this.loginShowAllMsgList()
        },
    },
};
</script>

<style  lang="less" scoped>

</style>
